<template>
  <div class="flex-flow">
    <!-- <div class="info-box">
      <div class="flex1 gray-font">
        <div><img src="https://static.meboth.cn/xiaomi/metripapp/wechat-app-xiaomi/images/no.png" class="no"/> {{info.plantNo}}</div>
        <div><img src="https://static.meboth.cn/xiaomi/metripapp/wechat-app-xiaomi/images/dianliang100.png" class="dianl"/> {{info.extensionMileage}}公里</div>
      </div>
      
      <div class="flex1 topflex">
        <div class="item">
          <p><span class="tip1">{{info.orderTime || 0}}</span><span>分钟</span></p>
          <p><span>用车时长</span></p>
          <button class="leftbtn" @click="sendBox('A')">开锁启动</button>
          <span class="line"></span>
        </div>
        <div class="item">
          <p><span class="tip1">{{info.mileage || 0}}</span><span>公里</span></p>
          <p><span>骑行距离</span></p>
          <button class="leftbtn" @click="sendBox('B')">临时锁车</button>
        </div>
      </div>
    </div> -->
    <div class="tips" v-if="showNoticeTop">
      <swiper class="swiper-container" :indicator-dots="true" :autoplay="true">
        <block v-for="(item,index) in noticeTop" :index="index" :key="index">
          <swiper-item>
            <img :src="item.imgUrl" @click="goActivity(item)" alt="">
          </swiper-item>
        </block>
      </swiper>
    </div>
    <map class="map"
         :markers="markers"
         id="myMap"
         show-location
         :longitude="longitude"
         :latitude="latitude"
         :scale="scale"
         :polygons="polygons"
         @regionchange="regionChange"
         @begin="regionChangeBegin"
         @end="regionChangeEnd"
    >
      <cover-image class="icon-center" src="/static/images/location.png"/>
      <cover-image class="icon icon-alert" src="/static/images/home_btn_red.png"/>
      <cover-image class="icon icon-locate" src="/static/images/home_btn_position.png" @click="setMarker"/>
      <cover-image class="icon icon-tips" src="/static/images/home_btn_kf.png" @click="jump('useTip')"/>

      <!-- <cover-view class="control-btn">
        <cover-image class="bg" src="/static/images/yongche_bg.png"/>
        <cover-view class="button" @click="preReturnBike()">立即还车</cover-view>
      </cover-view> -->
    </map>
    <input type="text" v-model="operateAreaIdfive" style="display: none"/>
      <cover-view class="footer">
        <!-- <cover-view class="close-status" @click="goIndex">X</cover-view> -->
        <cover-view class="bike-info">
          <cover-image class="logo" src="/static/images/bike-round.png" />
          <cover-view class="info">
            <cover-view class="item">{{info.plantNo}}</cover-view>
            <cover-view class="item">预计行驶：{{info.extensionMileage}} km</cover-view>
          </cover-view>
          <cover-view class="info">
            <cover-view class="item"></cover-view>
            <cover-view class="item color-yellow" v-if="info.returnCode===200">还车范围内</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box">
          <cover-view class="flex-item-info">
            <cover-image class="img-tag fl" src="/static/images/user-time.png"></cover-image>
            <cover-view class="fl">
              <cover-view class="item-info-line">{{info.orderTime || 0}}分钟</cover-view>
              <cover-view class="item-info-line color-gray">骑行时长</cover-view>
            </cover-view>
          </cover-view>
          <cover-view class="flex-item-info">
            <cover-image class="img-tag fl" src="/static/images/licheng.png"></cover-image>
            <cover-view class="fl">
              <cover-view class="item-info-line">{{info.mileage}}km</cover-view>
              <cover-view class="item-info-line color-gray">订单里程</cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box" v-if="!returning">
          <cover-view class="flex-item-operation" @click="sendBox('L')">
            <cover-image class="img-operatin" src="/static/images/yc-unlock.png"></cover-image>
            <cover-view>开车</cover-view>
          </cover-view>
          <cover-view class="flex-item-operation" @click="sendBox('UL')">
            <cover-image class="img-operatin" src="/static/images/yc-lock.png"></cover-image>
            <cover-view>锁车</cover-view>
          </cover-view>
          <cover-view class="flex-item-operation" @click="sendBox('FC')">
            <cover-image class="img-operatin" src="/static/images/yc-search.png"></cover-image>
            <cover-view>寻车</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box" v-else>
          <cover-view class="flex-item-operation count-box">
            <cover-view class="fl">{{secondsNum}}s</cover-view>
            <cover-view class="fl color-gray">10秒倒计时内，无操作恢复计费!</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="flex-box" v-if="returning">
          <button class="btn" @click="timer">继续用车</button>
          <button class="btn confirm-back"  @click="preReturnBike()">确认还车</button>
        </cover-view>
        <button class="btn"  @click="returnDialog" v-if="!returning">还车</button>
      </cover-view>
  </div>
</template>
<script>
  import Service from '@/utils/service'
  import {canvasArea} from '@/utils/index'

  export default {
    data() {
      return {
        latitude: 0,
        longitude: 0,
        scale: 20,
        mapCtx: null,
        markers: [],
        orderNo: '',
        operateAreaId:null,
        info:{},
        time: null,
        orderInfo:{},
        polygons:[],
        areaPolygons:[],
        nearPolygons:[],
        noreturn:[],
        areaArr:[],
        operaArea:[],
        nearlongitude:null,
        nearlatitude:null,
        dialog:null,
        operateAreaIdfive:null,
        disable:true,
        count:3,
        noticeTop:[],
        showNoticeTop:false,
        returning:false,
        secondsNum:10
      }
    },
    onLoad(options) {
      this.orderNo = options.orderNo
      this.operateAreaId = options.operateAreaId
      this.setMarker()
      this.getNotice('9')
    },
    watch:{
      operateAreaIdfive(value,old){
        if(value !== old){
          let _this = this
          this.operaArea = []
           Service.searchArea({operateAreaId:value}).then((res)=>{
             if(res.code ==200) {

               let arr = []
               let operateAreaVos = res.data.operateAreaVos[0].regionLocations
               let color = { strokeColor: '#ffad52', fillColor: '#ffad521f', zIndex: 2 }
               if (operateAreaVos.length > 0) {
                 operateAreaVos.forEach((itemlocal) => {
                   arr.push({ longitude: itemlocal.location[0], latitude: itemlocal.location[1] })
                 })
                 _this.operaArea.push({
                   points: arr,
                   strokeWidth: 2,
                   strokeColor: color.strokeColor,
                   fillColor: color.fillColor,
                   opacity: 0.15,
                   zIndex: color.zIndex
                 })
               }
               _this.polygons = []
               _this.polygons = _this.areaPolygons.concat(_this.nearPolygons, _this.noreturn,_this.operaArea)

             }
           })

        }
      }
    },
    onShow() {
      this.refreshInfo()
      this.timer()
      this.getArea()
    },
    methods: {
      timer() {
        this.returning = false
        clearInterval(this.time)
        let _this = this
        this.time = setInterval(() => {
          _this.refreshInfo()
        },5000)
      },
      returnDialog() {
        this.returning = true;
        clearInterval(this.time)
        this.secondsNum = 10;
        this.secondsWatch()
      },
      secondsWatch() {
        setTimeout(() => {
          this.secondsNum--
          if(this.secondsNum <= 0) {
            this.timer()
            return
          }
          this.secondsWatch()
        }, 1000);
      },
      goIndex() {
        wx.reLaunch({
          url: '../index/main?isUsing=true'
        })
      },
      getNotice(adPosition) {
        let data = {
          adPosition: adPosition
        }
        Service.getNotice(data).then((res) => {
          if (res.code == 200) {
            let noticeVos = res.data.noticeVos
            if (noticeVos.length > 0) {
              switch (adPosition) {
                case '2':
                  this.noticeBox = noticeVos;
                  this.getNoticeBox = true
                  break
                case '9':
                  this.noticeTop = noticeVos;
                  this.showNoticeTop = true
                  break
              }
            }else {
              this.showNotice = false
            }
          }else {
            this.showNotice = false
          }
        })
      },
      call() {
        wx.makePhoneCall({
          phoneNumber: '4000029717'
        })
      },
      jump(rout) {
        clearInterval(this.time)
        wx.navigateTo({
          url: `../${rout}/main`
        })
      },
      preReturnBike() {
        let _this = this
        if(!this.disable){
          return
        }
        this.disable = false
        setTimeout(() => {
          _this.disable = true
        },2000)
        wx.getLocation({
          type: 'gcj02',
          success(res) {
            wx.setStorageSync('localtion', res);
            _this.latitude = res.latitude
            _this.longitude = res.longitude
          }
        })
        let data = {
          orderNo: this.orderNo,
          mobileLatitude: this.latitude,
          mobileLongitude: this.longitude
        }
        Service.preReturnBike(data).then((res) => {

          clearInterval(this.time)

          switch (res.code) {
            case 200:
              let data = res.data
              data.orderNo = this.orderNo
              let orderInfo = JSON.stringify(data);
              if (res.data.isDispatch == 0) {
                // wx.navigateTo({
                //   url: '../returnCar/main?orderInfo='+orderInfo
                // })
                this.returnBike()
              } else if (res.data.isDispatch == 1) {
                wx.navigateTo({
                  url: '../dispatch/main?orderInfo='+orderInfo
                })
              }
              break
            case 400: //订单已经还车未结算跳转支付页面
              wx.reLaunch({
                url: '../waitPay/main?autoPay=1&orderNo='+this.orderNo
              })
              break
            case 401: //订单已经取消跳转首页
              setTimeout(() => {
                wx.reLaunch({
                  url: '../index/main'
                })
              },200)
              break
            case 403: //订单未使用取消订单
              setTimeout(() => {
                wx.reLaunch({
                  url: '../index/main'
                })
              },200)
              break
            // case 411: //还车区外不可还车
            //   wx.navigateTo({
            //     url: '../prohibit/main?type=1'
            //   })
            //   break
            case 415: //无法还车
              wx.navigateTo({
                url: '../prohibit/main?type=1'
              })
              break
            case 412: //禁还区域
//              clearInterval(this.time)
              wx.navigateTo({
                url: '../prohibit/main?type=4'
              })
              break
            case 413: //2分钟内还车
              let data1 = {}
              data1.orderNo = this.orderNo
              data1.free = '1'
              data1.amount = '0'
              let orderInfo1 = JSON.stringify(data1);
              // wx.navigateTo({
              //   url: '../returnCar/main?orderInfo='+orderInfo1
              // })
              this.returnBike()
              break
          }
        })
      },
      async returnBike() {
        await this.sendBox('UL')
        let data = {
          orderNo: this.orderNo
        }
        Service.returnBike(data).then((res) => {
          switch (res.code) {
            case 200:
              this.getCostDetail()
              break
            case 400: //订单已经还车未结算跳转支付页面
              this.getCostDetail()
              break
            case 401: //订单已经取消跳转首页
              setTimeout(() => {
                wx.reLaunch({
                  url: '../index/main'
                })
              },2000)
              break
            case 403: //未使用车辆，订单已取消
              setTimeout(() => {
                wx.reLaunch({
                  url: '../index/main'
                })
              },2000)
              break
            case 405: //订单费用为0，跳转支付完成页面
              setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.orderNo
              })
              },2000)
              break
          }
        })
      },
      getCostDetail() {
        let data = {
          orderNo: this.orderNo
        }
        Service.getCostDetail(data).then((res) => {
          if (res.code == 200) {
            let data = res.data
            data.orderNo = this.orderNo
            let travelInfo = JSON.stringify(data)
            setTimeout(() => {
              wx.reLaunch({
                url: '../waitPay/main?travelInfo=' + travelInfo
              })
            },200)
          } else if (res.code == 300) {
            setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.orderNo
              })
            },200)
          }
        })
      },
      refreshInfo() {
        // debugger
        let data = {
          orderNo: this.orderNo,
          noLoading: true
        }
        let _this = this
        Service.refreshInfo(data).then((res) => {
          _this.noreturn = []
          if (res.code != 200) clearInterval(this.time)
          switch (res.code) {

            case 200:
              this.info = res.data
              let noProhibit1 = wx.getStorageSync('noProhibit1');
              let noProhibit2 = wx.getStorageSync('noProhibit2');
              let noProhibit3 = wx.getStorageSync('noProhibit3');
              let noProhibit4 = wx.getStorageSync('noProhibit4');
              this.longitude = res.data.boxLongitude
              this.latitude = res.data.boxLatitude
              this.markers = [
                {
                  iconPath: '/static/images/map-markers/map_mebike_nor.png',
                  width: '90rpx',
                  height: '100rpx',
                  longitude: res.data.boxLongitude,
                  latitude: res.data.boxLatitude,
                  zIndex: 99
                }
              ]
              if(res.data.regionLocations){ //禁还区
                let arr =[]
                let operateAreaVos = res.data.regionLocations
                let color = {strokeColor:'#999999FF',fillColor:'#99999933',zIndex:10}
                if(operateAreaVos.length>0){
                  operateAreaVos.forEach((itemlocal) => {
                      arr.push({ longitude: itemlocal.location[0], latitude: itemlocal.location[1] })
                    })

                  _this.noreturn.push({
                    points: arr,
                    strokeWidth: 2,
                    strokeColor: color.strokeColor,
                    fillColor: color.fillColor,
                    opacity: 0.15,
                    zIndex: color.zIndex
                  })
                }
                _this.polygons = []

                _this.polygons = _this.areaPolygons.concat(_this.nearPolygons,_this.noreturn)
              }
              if(res.data.returnCode == 414){ //运营区域外
                _this.operateAreaIdfive = res.data.operateAreaId
                if(!noProhibit2) { //414 可骑行区域外车辆断电
                  wx.navigateTo({
                    url: '../prohibit/main?type=2'
                  })
                  clearInterval(_this.time)
                }
              }

              if(res.data.returnCode == 412&&!noProhibit4) {
                wx.navigateTo({
                  url: '../prohibit/main?type=4'
                })
                clearInterval(_this.time)

              }
              if(res.data.forbidTravelAreaId&&!noProhibit3){  //禁行区id 不为空的话给出进入禁行区弹窗
                wx.navigateTo({
                  url: '../prohibit/main?type=3'
                })
                clearInterval(_this.time)
              }
              break
            case 400: //订单已经还车未结算跳转支付页面
              wx.reLaunch({
                url: '../waitPay/main?autoPay=1&orderNo='+this.orderNo
              })
              break
            case 401: //订单已经取消跳转首页
              setTimeout(() => {
                wx.reLaunch({
                  url: '../index/main'
                })
              },200)
              break
            case 405: //订单已经结算费用为0 跳转支付完成页面
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.orderNo
              })
              break
          }

        })
      },
      sendBox(operation) {
        let data = {
          operation: operation,
          bikeId: this.info.bikeId
        }
        let _this = this
        Service.sendBox(data).then((res) => {
          if (res.code == 200) {
            let msg = ''
            if(operation == 'L') {
              msg = '开始启动'
            }else if(operation == 'UL') {
              msg = '锁车成功'
            }
            wx.showToast({
              title: msg,
              icon: 'success',
              duration: 2000
            });
          }
        })
      },
      init() {
        let _this = this
        _this.latitude = wx.getStorageSync('localtion').latitude
        _this.longitude = wx.getStorageSync('localtion').longitude
      },

      setMarker() {
        let _this = this
        let mpCtx = wx.createMapContext("myMap");
        mpCtx.moveToLocation();
        //获取设备位置
        wx.getLocation({
          type: 'gcj02',
          success(res) {
            wx.setStorageSync('localtion', res);
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.nearlongitude = _this.longitude
            _this.nearlatitude = _this.latitude
            _this.init()
            _this.getNear()
          }
        })
      },

      getArea() {
        this.polygons = []
        this.areaPolygons = []

        let _this = this
        //服务区域
        Service.getServiceArea().then((res) => {
          let operateAreaVos = res.data.areaVos
          let color = {strokeColor:'#78B473FF',fillColor:'#78B4731A',zIndex:2}
          if(operateAreaVos.length>0){
            let areaArr = canvasArea(operateAreaVos,_this.operateAreaId)
            areaArr.forEach((items) =>{
              _this.areaPolygons.push(
                {
                  points: items,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity:0.15,
                  zIndex: color.zIndex
                }
              )
            })
          }
        })

        //禁行区域
        Service.getForbidArea().then((res) => {
          let operateAreaVos = res.data.areaVos
          let color = {strokeColor:'#F98678FF',fillColor:'#F9867833',zIndex:4}
          if(operateAreaVos.length>0) {
            let areaArr = canvasArea(operateAreaVos,_this.operateAreaId)
            areaArr.forEach((items) =>{
              _this.areaPolygons.push(
                {
                  points: items,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity:0.15,
                  zIndex: color.zIndex
                }
              )
            })
          }
        })
        //大还车区
        Service.getBigReturnArea().then((res) => {
          let operateAreaVos = res.data.areaVos
          let color = {strokeColor:'#93C1EFFF',fillColor:'#93C1EF26',zIndex:3}
          if(operateAreaVos.length>0) {
            let areaArr = canvasArea(operateAreaVos,_this.operateAreaId)

            areaArr.forEach((items) =>{
              _this.areaPolygons.push(
                {
                  points: items,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity:0.15,
                  zIndex: color.zIndex
                }
              )
            })
          }
        })
        _this.polygons=_this.areaPolygons
      },
      getNear() {
        //附近还车区和车辆
        /**
         * 参数
         */
        this.polygons = []
        this.nearPolygons = []
        let _this= this
        let zoomLevel = ''
        let scale = Number(this.scale)
        if (scale >= 17) {
          zoomLevel = '1'
        } else if (scale >= 12 && scale < 17) {
          zoomLevel = '2'
        } else if (scale < 12){
          zoomLevel = '3'
        }
        let data = {
          operateAreaId:this.operateAreaId,
          zoomLevel:zoomLevel || '1',
          longitude:this.nearlongitude||this.longitude,
          latitude:this.nearlatitude||this.latitude,
          noLoading: true
        }
        let nearArr = []
        let bikeArr = []
        Service.inuseReturnArea(data).then((res) => {
          if(res.code ==200) {

            //附近的车辆


            //附近的停车网点
            let operateAreaVos = res.data.areaVos
            let areaArrNear5 = []
            let areaArrNear6 = []
            operateAreaVos.forEach((item) => {

              if(item.areaType == 5){
                let arr = []
                let color = {strokeColor:'#FED033FF',fillColor:'#FED03333',zIndex:5}
                if (item.regionLocations) {
                  item.regionLocations.forEach((itemlocal) => {
                    arr.push({ longitude: itemlocal.location[0], latitude: itemlocal.location[1] })
                  })
                }
                areaArrNear5.push({
                  points: arr,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity: 0.15,
                  zIndex: color.zIndex
                })
              }
              if(item.areaType == 6){
                let arr = []
                let color = {strokeColor:'#93C1EFFF',fillColor:'#93C1EF26',zIndex:6}
                if (item.regionLocations) {
                  item.regionLocations.forEach((itemlocal) => {
                    arr.push({ longitude: itemlocal.location[0], latitude: itemlocal.location[1] })
                  })
                }
                areaArrNear6.push({
                  points: arr,
                  strokeWidth: 2,
                  strokeColor: color.strokeColor,
                  fillColor: color.fillColor,
                  opacity: 0.15,
                  zIndex: color.zIndex
                })
              }

            })
            _this.nearPolygons = areaArrNear5.concat(areaArrNear6)
            _this.polygons = _this.areaPolygons.concat(_this.nearPolygons,_this.operaArea)
          }
        })


      },
      getLngLat() {
        this.mapCtx = wx.createMapContext("myMap");
        let _this = this
        this.mapCtx.getCenterLocation({
          success: function (res) {
            let data = res
            _this.nearlongitude = data.longitude
            _this.nearlatitude = data.latitude
            _this.getNear()
          }
        })
      },
      regionChange() {},
      regionChangeBegin() {},
      regionChangeEnd(e) {
        let _this = this
        if (e.type == 'end' && e.mp.causedBy == 'drag') {
          this.getLngLat()

        }
        if(e.type == 'end' && e.mp.causedBy == 'scale'){
          this.mapCtx = wx.createMapContext("myMap");
          this.mapCtx.getScale({
            success: function (res) {
              _this.scale = res.scale
            }
          })
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .flex-flow
    display: flex
    flex-flow: column;
    height 100vh
  .map
    flex 1
    position: relative
    width: 100%
  .icon
    position: fixed
    width 75px
    height 75px

  .icon-user
    right 30px
    bottom: 50px;
  .icon-alert
    right 30px;
    bottom 400px;
  .icon-locate
    right 30px
    bottom: 300px;
  .icon-tips
    right 30px
    bottom: 200px;
  .icon-center
    position: absolute
    left: 50%;
    top: 50%;
    transform: translate(-50%,-100%);
    width 34px
    height 62px
  .control-btn
    position: absolute;
    left: 210px;
    right: 210px;
    bottom: 38px;
    display: flex;
    justify-content: center;
    .bg
      width 330px
      height: 130px
    .button
      position: absolute
      top: 0px
      left 0px
      width 330px
      height:130px
      line-height: 130px
      border-radius 45px
      font-size:30px
      color: #333
      text-align center

  .tips
    position: fixed;
    top: 30px;
    left: 30px;
    right: 30px
    width: 690px;
    height: 120px;
    .swiper-container {
      width: 690px;
      height: 120px;
    }
    img
      width: 690px;
      height: 120px;

  .info-box
    height 348px
    padding 0 50px
    text-align center
  .gray-font
    padding-top 23px
    font-size: 26px;
    color: #666;
    line-height: 37px
  .topflex
    font-size 22px
    color: #999
    line-height: 30px
    .item
      position: relative
      padding-top 52px
      p
        padding-bottom 20px
      .line
        position: absolute
        right -17px
        top: 40px
        width 2px
        height 93px
        background #EFEFEF
  .tip1{
    font-size 46px
    font-weight bold
    color: #333
  }
  .no{
    position: relative
    top: 3px
    width: 24px;
    height: 24px;
  }
  .dianl{
    position: relative
    top: 3px
    width: 40px;
    height: 24px;
  }
  .leftbtn{
    width:310px;
    height:70px;
    background:rgba(255,227,127,1);
    border-radius:10px;
    font-size: 30px;
    color: #523A24;
    margin-top: 20px;
  }

  .fl {
    float:left;
  }

  .color-yellow
    color #febd19
  .color-gray
    color #999999

  .footer
    display: block
    position: fixed
    left 0px
    right 0px
    bottom: 0px
    width 100%
    background #ffffff
    justify-content: center;
    align-items: center
    border-top: 2px solid #bbbbbb
    overflow: auto
    .close-status 
      position absolute
      right 25px
      top 20px
      width 50px
      height 50px
      border-radius 25px
      background  #FED130
      color #ffffff
      text-align center
      line-height 50px
    .flex-box
      display flex
      width 700px
      justify-content center
      margin 0 auto
      .flex-item-operation
        flex 1
        height 120px
        justify-content center
        text-align center
        margin-top 20px
        .img-operatin
          margin 0 auto
          width 70px
          height 70px
      .count-box
        height 120px
        font-size 28px
        .fl
          margin-left 60px
          height 120px
          line-height 120px
      .flex-item-info
        width 320px
        height 120px
        border-radius 10px
        box-shadow: -2px -2px 10rpx rgba(0, 0, 0, 0.1);
        margin 0 15px
        .item-info-line 
          margin-left 20px
          margin-top 20px
        .item-info-line:last-child
          font-size 24px
        .img-tag
          margin-top 33px
          margin-left 30px
          width 53px
          height 49px
    .desc
      display: block
      width 700px
      margin 20px auto
      .desc-row
        display: block
        height 50px
        line-height: 50px
        .search-scope
          padding 5px 20px
          background #f5f5f5
          border-radius 25px
          color #eb0d09
    .bike-info
      display: block
      width 700px
      margin 20px auto
      .logo
        display block
        float left
        width 100px
        height 100px
      .info 
        display block
        float left
        color #101010
        margin-left 60px
        .item
          display block
          height 50px
          line-height 50px
    .btn
      display: block
      width 300px
      height: 90px
      line-height: 90px
      margin 20px auto
      border-radius 45px
      background #FED130
      font-size 30px
      font-weight bold
      color: #fff
      text-align center
    .confirm-back
      background #f4f3ef
      color #000
</style>

